
.div1 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-direction: row;
    gap: 0px;
}

.div2 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-direction: row;
    gap: 0px;
}


.div5 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
}

.div6, .div7, .div8 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    flex-direction: row;
    gap: 0px;
}

.div6 {
    justify-content: left;
}

.div7 {
    justify-content: center;
}

.div8 {
    justify-content: right;
}


.div9 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
}

.div3, .div4, .div123 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

.div10 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.top_img {
    width: 100%;
    height: 100%;
    /*
        CSS 的 object-fit 属性用于控制替换元素（如 <img>、video 等）的内容如何适应其容器的尺寸，避免内容变形或留白
            作用‌：控制替换元素内容在容器中的缩放和显示方式，保持原始比例或填充容器‌
            适用元素‌：<img>、video、picture 等替换元素‌

        属性值详解:
            属性值	                    效果描述	                                            类比说明
           fill                     拉伸/压缩填满容器，可能变形                              硬塞照片进画框
           contain                  保持比例缩放，完整显示内容，容器可能留白                    照片完整显示，四周留空
           cover                    保持比例缩放至填满容器，可能裁剪部分内容                    裁切照片边角填满画框
           none                     不缩放，按原始大小显示，超出容器不裁剪                      原图直接显示，超出部分忽略
           scale-down               取 none 或 contain 中较小的尺寸                         图小时原样显示，大时缩小适配

        典型应用场景
              contain‌：需完整展示内容（如产品图库）‌
              cover‌：需填满容器且允许裁剪（如背景图）‌
              fill‌：不介意变形时使用（较少推荐）‌
        object-position 可调整内容在容器内的位置（如居中、顶部等），与 object-fit 组合实现更精细布局‌
    */
    object-fit: contain;
}


.div11 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0px;
}

.tab3_img1 {
    position: relative;
    height: 70%;
    width: 100%;
    object-fit: fill;
}

.tab3_img2 {
    position: relative;
    height: 30%;
    width: 100%;
    object-fit: fill;
}


.div16 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

.div17 {
    width: 55%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.div18 {
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

.div19, .div20, .div21, .div22, .div23 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    gap: 0px;
}

.div27, .div28 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0px;
}


.div24, .div25, .div29 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

.div26, .div30 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.div31, .div34, .div37, .div40, .div43 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.div32, .div35, .div38, .div41 {
    width: 53%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    gap: 0px;
}

.div33, .div36, .div39, .div42 {
    width: 47%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-direction: row;
    gap: 0px;
}

.div44 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}


.div47, .div50, .div53, .div56 {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

.div48, .div51, .div54, .div57 {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

/*
  上面可以学一学
*/

.div46, .div49, .div52, .div55 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.div45, .div59 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.div62 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}


.div60, .div61 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0px;
}

.div68 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.div69, .div70, .div71 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    gap: 0px;
}

.div72 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.div73, .div74 {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.div75 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.div76, .div79, .div82, .div85, .div89, .div91 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.div77, .div80, .div83 {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    gap: 0px;
}

.div78, .div81, .div84 {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-direction: row;
    gap: 0px;
}

.div86 {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    gap: 0px;
}

.div87 {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

.div88 {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-direction: row;
    gap: 0px;
}

.div90 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    gap: 0px;
}

.div92 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-direction: row;
    gap: 0px;
}


.div93 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.div94 {
    width: 100%;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.div97 {
    width: 100%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}


.div95, .div96, .div98, .div99 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

.div100, .div107 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.div101, .div102, .div103, .div105, .div106 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

.div104, .div108, .div112, .div116, .div120 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}


.div109, .div113, .div117 {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    gap: 0px;
}

.div110, .div114, .div118 {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

.div111, .div115, .div119 {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

.div121 {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-direction: row;
    gap: 0px;
}

.div122 {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 0px;
}

/*
    上面的CSS样式需要去除冗余
*/